<template>
	<div class="todo-list">
		<div class="todo-item" v-for="item in list" :key="item.id">
			<van-cell :title="item.name" :class="item.done?'item-label-completed':''">
				<template #icon>
					<van-icon :name="item.done ? 'passed' :'clock-o'" @click="checkDone(item)" />
				</template>
				<template #right-icon>
					<van-icon name="clear" @click="delTodo(item.id)" />
				</template>
			</van-cell>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array
			}
		},
		methods: {
			checkDone(item) {
				item.done = !item.done
			},
			delTodo(id) {
				id && this.$emit('delTodo', id) //触发事件
			}
		}
	}
</script>

<style>
	.todo-item {
		border-bottom: 1px solid #ededed;
	}

	.item-label-completed {
		color: #949494;
		text-decoration: line-through;
	}

	.van-cell {
		font-size: 18px;
	}

	.van-icon {
		font-size: 24px;
		margin: 0 10px;
	}
</style>